<template>
  <div class="category">
    <el-form inline>
      <el-form-item>
        <el-input v-model="category"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="showDialog('')">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="lists">
      <el-table-column prop="_id" label="ID"></el-table-column>
      <el-table-column prop="name" label="广告名称"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="showDialog(scope.row._id)">编辑</el-button>
          <el-button type="text" @click="deleteCate(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <advert-dialog
      :dialogVisible="dialogStatus"
      :dialogId="id"
      :title="title"
      :parents="lists"
      @close="dialogStatus=$event"
      @getCategory="getCategory"
    ></advert-dialog>
    <el-dialog title="广告播放" :visible.sync="dialogVisible">
      <video :src="url" controls style="width:100%"></video>
    </el-dialog>
  </div>
</template>
<script>
import advertDialog from "../components/advertDialog";
export default {
  components: {
    advertDialog
  },
  data() {
    return {
      lists: [],
      category: "",
      dialogStatus: false,
      title: "新增广告",
      id: "",
      url: '',
      dialogVisible: false
    };
  },
  methods: {
    async getCategory() { //获取广告
      const res = await this.$http.get("rest/ads");
      this.lists = res.data;
    },
    showDialog(id) { //打开弹框
      if (id) {
        this.title = "编辑广告";
        this.id = id;
      } else {
        this.title = "新增广告";
        this.id = "";
      }
      this.dialogStatus = true;
    },
    deleteCate(row) { //删除
      this.$confirm(`此操作将永久删除${row.name}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        await this.$http.delete('rest/ads/'+row._id)
        this.getCategory()
        this.$message({
          type: "success",
          message: "删除成功!"
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },
    show(url) { //点击显示广告
      this.dialogVisible = true
      this.url = url
    }
  },
  created() {
    this.getCategory();
  }
};
</script>
<style lang='scss' scoped>
</style>